---
title: Usando fuentes personalizadas
description: >-
  ¿Buscas agregar tipografías personalizadas a un proyecto de Astro? Usa Google
  Fonts con Fontsource o añade una fuente a elección.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


Esta guía te mostrará cómo añadir fuentes web a tu proyecto y usarlas en tus componentes.

## Usando un archivo de fuente local

Este ejemplo demostrará cómo añadir una fuente personalizada usando el archivo de fuente `DistantGalaxy.woff`.

1. Añade tu archivo de fuente a la carpeta `public/fonts/`.
2. Agrega la siguiente declaración `@font-face` a tu CSS. Esto puede ser en un archivo `.css` global que importes, un bloque `<style is:global>` o un bloque `<style>` en un diseño o componente específico donde quieras usar esta fuente.

    ```css
    /* Registra tu font family personalizada y le indicamos al navegador dónde encontrarla. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

3. Usa el valor de `font-family` de la declaración `@font-face` para dar estilo a los elementos en tu componente o diseño. En este ejemplo, el encabezado `<h1>` tendrá la fuente personalizada aplicada, mientras que el párrafo `<p>` no.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---

    <h1>En una galaxia muy, muy lejana...</h1>

    <p>¡Las fuentes personalizadas hacen que mis títulos se vean mucho mejor!</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Usando Fontsource

El proyecto [Fontsource](https://fontsource.org/) simplifica el uso de Google Fonts y otras fuentes de código abierto. Provee módulos npm que puedes instalar para las fuentes que desees utilizar.

1. Encuentra la fuente que quieras usar en el [catálogo de Fontsource](https://fontsource.org/). Este ejemplo usará [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
2. Instala el paquete de la fuente que hayas elegido.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Puedes encontrar el nombre correcto del paquete en la sección “Quick Installation” en la página de cada fuente en el sitio de Fontsource. Comienza con `@fontsource/` seguido del nombre de la fuente.
    :::

3. Importa el paquete de la fuente en el componente donde quieras usar la fuente. Por lo general, querrás hacer esto en un componente de diseño común para asegurarte de que la fuente esté disponible en todo tu sitio.

    La importación añadirá las reglas de `@font-face` necesarias para configurar la fuente.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

4. Usa el nombre de la fuente como se muestra en el ejemplo `body` en la página de Fontsource para el valor de `font-family`. Esto funcionará en cualquier lugar donde puedas escribir CSS en tu proyecto de Astro.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Registrando fuentes con Tailwind

Si estás usando la [integración de Tailwind](/es/guides/integrations-guide/tailwind/), puedes usar cualquiera de los métodos anteriores en esta página para instalar tu fuente, con algunas modificaciones. Puedes añadir una [declaración`@font-face` para una fuente local](#usando-un-archivo-de-fuente-local) o usar [la estrategia `import` de Fontsource](#usando-fontsource) para instalar tu fuente.

Para registrar tu fuente en Tailwind:

1. Sigue los pasos de las guías anteriores, pero deja sin completar el paso final sobre agregar una `font-family` en tu CSS.

2. Agrega el nombre de la tipografía en `tailwind.config.mjs`.

    Este ejemplo agrega `Inter` al conjunto de tipografías sans-serif, junto con fuentes de respaldo predeterminadas por Tailwind CSS.

    ```js title="tailwind.config.mjs" ins={1,8-10}
    import defaultTheme from 'tailwindcss/defaultTheme'

    /** @type {import('tailwindcss').Config} */
    export default {
    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    	theme: {
    		extend: {
    			fontFamily: {
    				sans: ['Inter', ...defaultTheme.fontFamily.sans],
    			},
    		},
    	},
    	plugins: [],
    }
    ```

    Ahora, todos los textos sans-serif (estilo por defecto en Tailwind) de tu proyecto utilizarán tu fuente elegida y la clase `font-sans` también aplicará la fuente Inter.

Revisa [la documentación de Tailwind para agregar fuentes personalizadas](https://tailwindcss.com/docs/font-family#using-custom-values) para más información.


## Más recursos

- Aprende como las fuentes web funcionan en la [guía de fuentes web de MDN](https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Web_fonts).
- Genera CSS para tu fuente con [el generador de fuentes web de Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).
